<template>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <div class="main-class" :style="{height:mainHeight+'px'}">
            <title>{{titleText}}</title>

            <!--  顶部选择设备  -->
            <van-dropdown-menu class="down-menu">
                <van-dropdown-item v-model="deviceId" :options="deviceList" @change="downMenuChange"/>
                <van-dropdown-item v-model="deviceId" disabled :options="deviceList"/>
            </van-dropdown-menu>

            <!--   顶部按钮   -->
            <van-button class="down-menu-btn" type="default" @click="openAddDevice">添加设备</van-button>

            <!--  弹窗    -->
            <van-dialog v-model="showDialog" title="添加设备"
                        :show-cancel-button="false"
                        :show-confirm-button="false"
                        :close-on-click-overlay="true">
                <bind-comp v-on:closeBindCompDialog="closeBindCompDialog"
                           scan-qr-margin-top="5%"
                           scan-qr-margin-bottom="5%"></bind-comp>
            </van-dialog>

            <!--  天气面板  -->
            <weather :region-text="regionText" :temp-number="tempNumber" :temp-details="tempDetails"
                     v-if="tabType === 1"
                     class="weather"></weather>

            <!--  城市空气质量指数  -->
            <div v-if="tabType === 1" class="weather-source">
                <span>城市空气质量指数</span>
                <div><span :style="{'border-color':cityAirColor}"></span>{{cityAirText}}：{{cityAirNum}}</div>
                <div style="font-size: small">湿度 {{humidity}}%</div>
            </div>

            <!--   当前区域的空气质量   -->
            <!--      <weather-mark></weather-mark>-->

            <!-- 动画表盘： 只有实时数据的时候才会显示背景图   -->
            <van-image v-show="tabType === 1" class="dial-background-img" :src="background"/>
            <div v-if="tabType === 1" :style="{top:dialDivTop+'px'}" class="dial-canvas-div">
                <dial-v2 v-if="dialIf" :on-line="onLine" :val="dialNum" :title-name="dialTitle"
                         :dial-star="dialStar"
                         :dial-detail="dialDetail"></dial-v2>
            </div>
            <!--   周图表   -->
            <div v-else-if='tabType === 2'>
                <charts-v2 v-if="weekChartsIf" class="charts" :xData="chartsWeekXData" :data="chartsWeekData"
                           :text="chartsText"
                           :device-name="meterTypeName" :pass-num="weekPassNum"></charts-v2>
            </div>
            <!--  月图表   -->
            <div v-else>
                <charts v-if="monthChartsIf" class="charts" :xData="chartsMonthXData" :data="chartsMonthData"
                        :text="chartsText"
                        :device-name="meterTypeName" :pass-num="monthPassNum"></charts>
            </div>

            <!--   功能展示区   -->
            <div class="fun-btn-group-parent" v-show="tabType === 1">
                <div class="fun-btn-group">
                    <fun-grid-item v-if="funGridIf" type="C" :state="funGridItems[0]"></fun-grid-item>
                    <fun-grid-item v-if="funGridIf" type="D" :state="funGridItems[1]"></fun-grid-item>
                    <fun-grid-item v-if="funGridIf" type="E" :state="funGridItems[2]"></fun-grid-item>
                    <fun-grid-item v-if="funGridIf" type="F" :state="funGridItems[3]"></fun-grid-item>
                    <fun-grid-item v-if="funGridIf" type="G" :state="funGridItems[4]"></fun-grid-item>
                    <fun-grid-item v-if="funGridIf" type="H" :state="funGridItems[5]"></fun-grid-item>
                </div>
            </div>

            <!--  tab切换按钮   -->
            <div class="tab-btn-group">
                <tab-button @click.native="setTab(1)" :isChecked="currDataBtnIsChecked" btn-text="实时数据"></tab-button>
                <tab-button @click.native="setTab(2)" :isChecked="weekDataBtnIsChecked" btn-text="周数据"></tab-button>
                <tab-button @click.native="setTab(3)" :isChecked="monthDataBtnIsChecked" btn-text="月数据"></tab-button>
            </div>
        </div>
    </van-pull-refresh>
</template>
<script>
    import DialV2 from "@/components/DialV2";
    import Charts from "@/components/Charts";
    import ChartsV2 from "@/components/Charts_v2";
    import TabButton from "@/components/TabButton";
    import Weather from "@/components/Weather";
    import {getUrlParam} from "@/util/GetUrlParam";
    import util from "@/util/util";
    import BindComp from "@/components/BindComp";
    import FunGridItem from "@/components/FunGridItem";
    import "@/util/inobounce.min";

    export default {
        data() {
            return {
                // TODO 页面数据
                background: require("@/images/charts-background@2x.png"), //实时数据-背景图
                isLoading: false,  //下拉刷新开关
                mainHeight: 0,     //父容器高度
                dialDivTop: 0,     //表盘距离顶部距离
                //TODO tab切换按钮
                currDataBtnIsChecked: true,   //实时数据
                weekDataBtnIsChecked: false,  //周数据
                monthDataBtnIsChecked: false, //月数据
                tabType: 1,        //'1,实时数据；2，周数据,3，月数据',
                titleText: '',     //页面title
                //TODO 主页面数据
                deviceId: '',       //当前设备ID
                meterType: 0,       //仪表类型
                meterTypeName: '',  // 仪表类型名称
                deviceList: [],     //该用户绑定的所有设备
                //TODO 表盘信息
                dialTitle: 'HCHO指数',  //表盘标题
                dialNum: 0,            //表盘数值
                dialDetail: '优',      //表盘描述
                dialStar: 6,           //表盘星数
                onLine: '0',           //设备是否在线
                //TODO 图表数据
                chartsText: '',       //图表描述
                //周数据
                chartsWeekXData: [],  //报表X轴数据（默认值）
                chartsWeekData: [],   //报表数据（默认值）
                //月数据
                chartsMonthXData: [], //报表X轴数据
                chartsMonthData: [],  //报表数据
                weekPassNum: 0,       //周合格指数
                monthPassNum: 0,      //月合格指数
                //图表数据源：接口返回源数据
                sourceChartsData: {
                    week: [],   //周数据
                    month: []   //月数据
                },
                //TODO 天气数据
                regionText: '---·---', //地址：北京市-海淀区
                tempNumber: '--',      //28℃
                tempDetails: '--:--',  //天气：晴
                //TODO 城市空气质量指数（调接口-方式频繁调接口-前端只调用一次）
                cityAirText: '良',      //空气状态
                cityAirNum: 0,         //空气指数
                cityAirColor: 'green', //默认绿色
                humidity: 0,
                //TODO 其他 dialog展示
                showDialog: false,
                //TODO 功能展示区显示：无须戴口罩-适宜室外活动-开窗通风-...
                funGridItems: ['1', '1', '1', '1', '1', '1'],
                //TODO 刷新使用
                dialIf: true,       //表盘刷新IF
                funGridIf: true,    //功能展示区刷新IF
                weekChartsIf: true, //周图表刷新IF
                monthChartsIf: true,//月图表刷新IF
            };
        },
        components: {
            Charts,
            ChartsV2,
            DialV2,
            TabButton,
            Weather,
            BindComp,
            FunGridItem
        },
        mounted() {
            let that = this;
            that.init();
            setInterval(() => {
                that.init();
            }, 10000);
        },
        methods: {
            init() {
                let that = this
                that.$setHTMLFontSise();
                addEventListener("resize", that.$setHTMLFontSise(), false);
                addEventListener("orientationchange", that.$setHTMLFontSise(), false); //移动端
                //设定页面尺寸
                that.mainHeight = window.innerHeight - 5;
                //表盘距离顶部距离window.innerHeight / 2 - 13rem;
                that.dialDivTop = window.innerHeight / 2 - (14.2 * util.getFontSize());
                //加载设备信息
                let dId = getUrlParam('deviceId');
                that.deviceId = String(dId);
                //加载handler && 加载设备列表
                that.handler();
            },
            onRefresh() {
                let that = this;
                setTimeout(() => {
                    that.init();
                    that.isLoading = false;
                }, 1000);
            },
            //设置tab按钮状态
            _setTabBtnStatus(type) {
                let typeNumber = Number(type);
                if (typeNumber === 1) {
                    this.currDataBtnIsChecked = true;
                    this.weekDataBtnIsChecked = false;
                    this.monthDataBtnIsChecked = false;
                } else if (typeNumber === 2) {
                    this.currDataBtnIsChecked = false;
                    this.weekDataBtnIsChecked = true;
                    this.monthDataBtnIsChecked = false;
                } else if (typeNumber === 3) {
                    this.currDataBtnIsChecked = false;
                    this.weekDataBtnIsChecked = false;
                    this.monthDataBtnIsChecked = true;
                }
            },
            //计算合格指数：周-月
            handlePassNum(valList) {
                let pass = [];
                //总天数
                let allDayCount = valList.length;
                for (let i = 0; i < allDayCount; i++) {
                    let val = valList[i];
                    //小于等于100合格
                    if (val <= 100) {
                        pass.push(val);
                    }
                }
                return Math.round((pass.length / allDayCount).toFixed(2) * 100);
            },
            //加载周图表
            loadWeekCharts() {
                let that = this;
                //清空旧数据
                that.chartsWeekXData = [];
                that.chartsWeekXData = [];
                if (that.sourceChartsData.week.length > 0) {
                    // let weekCount = 7, defWeekCount = 7;
                    // if (that.sourceChartsData.week.length < weekCount) {
                    //   weekCount = that.sourceChartsData.week.length;
                    // }
                    // let x = [];
                    // let xObj = [];
                    // let y = [];
                    //倒序取，因为页面固定展示7条，不确定接口返回多少条，如果接口返回大于7条，则取最后的7条，小于7条全取
                    // for (let i = (that.sourceChartsData.week.length - 1), j = 0; i >= 0 && j <= weekCount; i-- , j++) {
                    //   let dd = that.sourceChartsData.week[i];
                    //   let chartsData = that.getChartsData(dd, Number(that.meterType));
                    //   let toWeekName = util.toWeekName(chartsData.date);
                    //   xObj.push(toWeekName);
                    //   x.push(toWeekName.text);
                    //   y.push(chartsData.val);
                    // }
                    // //补零：不足7条补零
                    // if (x.length < defWeekCount) {
                    //   if (x.length === 0) {
                    //     for (let i = 0; i < defWeekCount; i++) {
                    //       x.splice(0, 0, util.toWeekNameByNum(i));
                    //       y.splice(0, 0, 0);
                    //     }
                    //   } else {
                    //     let temp = xObj[0];
                    //     for (let i = 0; i < (defWeekCount - weekCount); i++) {
                    //       x.splice(0, 0, util.toWeekNameByNum(temp.num + i + 1));
                    //       y.splice(0, 0, 0);
                    //     }
                    //   }
                    // }
                    let x = [];
                    let y = [];
                    for (let i = 0; i < that.sourceChartsData.week.length; i++) {
                        let dd = that.sourceChartsData.week[i];
                        let chartsData = that.getChartsData(dd, Number(that.meterType));
                        let toWeekName = util.toWeekName(chartsData.date);
                        x.push(toWeekName.text);
                        y.push(chartsData.val);
                    }
                    //计算【合格指数】：周
                    that.weekPassNum = that.handlePassNum(y);
                    //图表数据
                    that.chartsWeekXData.push(...x);
                    that.chartsWeekData.push(...y);
                    //刷新图表
                    that.updateWeekCharts();
                }
            },
            //加载月图表
            loadMonthCharts() {
                let that = this;
                //清空旧数据
                that.chartsMonthXData = [];
                that.chartsData = [];
                if (that.sourceChartsData.month.length > 0) {
                    let x = [];
                    let y = [];
                    for (let i = 0; i < that.sourceChartsData.month.length; i++) {
                        let dd = that.sourceChartsData.month[i];
                        let chartsData = that.getChartsData(dd, Number(that.meterType));
                        let recordDateArr = String(chartsData.date).split("-");
                        x.push(recordDateArr[1] + '/' + recordDateArr[2]);
                        y.push(chartsData.val === 0 ? null : chartsData.val);
                    }
                    //计算【合格指数】：月
                    that.monthPassNum = that.handlePassNum(y);
                    //图表数据
                    that.chartsMonthXData.push(...x);
                    that.chartsMonthData.push(...y);
                    //刷新图表
                    that.updateMonthCharts();
                }
            },
            //修改tab：表盘-周数据-月数据
            setTab(type) {
                let that = this;
                let typeNumber = Number(type);
                that.tabType = typeNumber
                that._setTabBtnStatus(typeNumber)
                if (typeNumber === 1) {
                    that.chartsText = ''
                } else if (typeNumber === 2) {
                    that.chartsText = '周数据'
                } else if (typeNumber === 3) {
                    that.chartsText = '月数据';
                }
            },
            //图表数据：通过设备类型获取对应数据
            getChartsData(data, meterType) {
                //甲醛
                if (meterType === 10041001) {
                    return {
                        val: data.hchoAve,
                        date: data.recordDate
                    };
                }
                //CO
                else if (meterType === 10041004) {
                    return 0;//data.coAve;
                }
                //PM2.5
                else if (meterType === 10041003) {
                    return 0;//data.pmAve;
                }
                //TVOC
                else if (meterType === 10041002) {
                    return {
                        val: data.vocAve,
                        date: data.recordDate
                    };
                } else {
                    return 0;
                }
            },
            //取表盘数据：获取B区val,text
            getDomainBVal(data, meterType) {
                let that = this;
                //甲醛
                if (meterType === 10041001) {
                    return {
                        val: that.convertDataHCHO(data.data17),
                        text: 'HCHO指数'
                    }
                }
                //CO
                else if (meterType === 10041004) {
                    alert('目前不支持【CO】');
                }
                //PM2.5
                else if (meterType === 10041003) {
                    alert('目前不支持【PM2.5');
                }
                //TVOC
                else if (meterType === 10041002) {
                    return {
                        val: that.convertDataTVOC(data.data16),
                        text: 'TVOC指数'
                    }
                } else {
                    alert('设备类型错误：meterType：' + meterType);
                }
            },
            //数据转换（TVOC）
            convertDataTVOC(val) {
                let dialNum;
                if (val >= 0 && val <= 0.07) {
                    dialNum = 642.8 * val;
                } else if (val > 0.07 && val <= 0.16) {
                    dialNum = 33.3 * val + 45;
                } else if (val > 0.16 && val <= 1.6) {
                    dialNum = 312.5 * val;
                } else if (val > 1.6) {
                    dialNum = 500;
                } else {
                    dialNum = 0;
                }
                if (dialNum > 500) {
                    dialNum = 500;
                }
                if (dialNum < 0) {
                    dialNum = 0;
                }
                return Math.round(dialNum);
            },
            //数据转换（甲烷）
            convertDataHCHO(val) {
                let dialNum;
                if (val >= 0 && val <= 0.05) {
                    dialNum = 1000 * val;
                } else if (val > 0.05 && val <= 0.08) {
                    dialNum = 1667 * val - 34;
                } else if (val > 0.08 && val <= 0.2) {
                    dialNum = 833 * val + 33;
                } else if (val > 0.2 && val <= 0.4) {
                    dialNum = 1500 * val - 100;
                } else if (val > 0.4) {
                    dialNum = 500;
                } else {
                    dialNum = 0;

                }
                if (dialNum > 500) {
                    dialNum = 500;
                }
                if (dialNum < 0) {
                    dialNum = 0;
                }
                return Math.round(dialNum);
            },
            //刷新动画-方法
            updateDial() {
                let that = this;
                that.dialIf = false
                that.$nextTick(() => (that.dialIf = true))
            },
            uploadFunGrid() {
                let that = this;
                that.funGridIf = false
                that.$nextTick(() => (that.funGridIf = true));
            },
            updateWeekCharts() {
                let that = this;
                that.weekChartsIf = false;
                that.$nextTick(() => (that.weekChartsIf = true));
            },
            updateMonthCharts() {
                let that = this;
                that.monthChartsIf = false;
                that.$nextTick(() => (that.monthChartsIf = true));
            },
            //加载图表数据：** 当主页数据加载完成后加载图表数据，这样可以同步加载页面 **
            loadChartsData() {
                let that = this;
                let param = {
                    macAddress: that.deviceId,
                };
                //获取周数据（当前月的历史数据，按每天平均AQI数据）
                that.$http.restPost('/getWeekDeviceDatas.do', param).then(response => {
                    if (response.data) {
                        if (response.data.datas) {
                            that.sourceChartsData.week = response.data.datas;
                            //加载图表页面（周）
                            that.loadWeekCharts();
                        }
                    }
                });
                // TODO 废弃接口：周图表使用天接口处理 ：获取周（为每两个小时一条）
                that.$http.restPost('/getMonthDeviceDatas.do', param).then(response => {
                    if (response.data) {
                        if (response.data.datas) {
                            that.sourceChartsData.month = response.data.datas;
                            //加载图表页面（月）
                            that.loadMonthCharts();
                        }
                    }
                });
            },
            //加载表盘信息
            loadDeviceInfo(meterType) {
                let that = this;
                let cook = that.$cookies.get(process.env.VUE_APP_COOKIE_USER_KEY);
                let id = cook.userInfo.id;
                let param = {
                    userId: id,
                    macAddress: that.deviceId
                };
                that.$http.restPost('/getConcentDataByMAC.do', param).then(response => {
                    if (response.data) {
                        if (response.data.datas) {
                            //按照设备类型获取数据
                            //该设备是否在线
                            that.onLine = response.data.datas.onLine;
                            //设置离线在线状态
                            for (let i = 0; i < that.deviceList.length; i++) {
                                let device = that.deviceList[i];
                                if (device.value === that.deviceId) {
                                    if (that.onLine === '0') {
                                        device.text = device.text + '(离线)'
                                    }
                                }
                            }
                            console.log('设备是否在线：' + that.onLine);
                            let domainBValObj = that.getDomainBVal(response.data.datas, meterType);
                            that.domainB(domainBValObj.val, domainBValObj.text);
                        } else {
                            alert('不存在设备信息：MAC-ADDR：' + that.deviceId);
                        }
                        //更新表盘
                        that.updateDial();
                    }
                })
            },
            //加载设备信息：主页数据-设备列表-图表信息
            loadDevice() {
                let that = this;
                that.deviceList = [];
                let cook = that.$cookies.get(process.env.VUE_APP_COOKIE_USER_KEY);
                let id = cook.userInfo.id;
                let param = {
                    userId: id,
                    userType: 2
                };
                that.$http.restPost('/findUserDeviceList.do', param).then(res => {
                    let data = res.data;
                    let appUserDevice = data.AppUserDevice;
                    if (appUserDevice) {
                        if (appUserDevice.length > 0) {
                            for (let i = 0; i < appUserDevice.length; i++) {
                                let deviceCode = appUserDevice[i].deviceCode;
                                let deviceName = appUserDevice[i].deviceName;
                                let meterType = appUserDevice[i].meterType;
                                let meterTypeName = appUserDevice[i].meterTypeName;
                                //设置title(当前设备的设备ID)
                                if (that.deviceId === deviceCode) {
                                    that.meterType = meterType;
                                    that.meterTypeName = meterTypeName;
                                    that.titleText = that.meterTypeName;
                                    //加载当前页面数据
                                    that.loadDeviceInfo(Number(that.meterType))
                                    //加载图表数据：主页数据加载完成
                                    that.loadChartsData();
                                }
                                that.deviceList.push({value: deviceCode, text: deviceName});
                            }
                        }
                    }
                })
            },
            //下拉菜单改变数据
            downMenuChange(value) {
                location.href = 'main_v3.html?deviceId=' + value
            },
            //加载天气数据
            loadWeather() {
                let that = this;
                //获取地理位置
                that.$wechat.ready(() => {
                    that.$wechat.getLocation({
                        type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                        success: function (res) {
                            let latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90  lat纬度
                            let longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。 lng经
                            let param = {
                                longitude: longitude,
                                latitude: latitude,
                            };
                            that.$http.restPost('/getWeather.do', param).then((res) => {
                                let data = res.data;
                                if (data.result === 1) {
                                    if (data.data.lives && data.data.lives.length > 0) {
                                        let live = data.data.lives[0];
                                        //温度摄氏度
                                        let temperature = live.temperature;
                                        //省份
                                        let province = live.province;
                                        //区
                                        let city = live.city;
                                        //天气情况
                                        let weather = live.weather;
                                        //天气数据
                                        that.regionText = province + '·' + city;
                                        that.tempNumber = '' + temperature;
                                        that.tempDetails = '天气:' + weather;
                                    }
                                } else {
                                    alert('天气获取失败')
                                }
                            })
                        }
                    });
                });
            },
            //添加设备
            openAddDevice() {
                let that = this;
                that.showDialog = !that.showDialog;
            },
            //BindComp子组件回调关闭弹窗
            closeBindCompDialog() {
                let that = this;
                //关闭添加设备弹窗
                that.openAddDevice();
            },
            //表盘信息 0 <= dialNum <= 500
            domainB(dialNum, dialTitle) {
                let that = this;
                that.dialNum = dialNum;
                that.dialTitle = dialTitle;
                if (0 <= dialNum && dialNum <= 50) {
                    that.dialStar = 6;
                    that.dialDetail = '优';
                } else if (50 < dialNum && dialNum <= 100) {
                    that.dialStar = 5;
                    that.dialDetail = '良';
                } else if (100 < dialNum && dialNum <= 150) {
                    that.dialStar = 4;
                    that.dialDetail = '轻度污染';
                } else if (150 < dialNum && dialNum <= 200) {
                    that.dialStar = 3;
                    that.dialDetail = '中度污染';
                } else if (200 < dialNum && dialNum <= 300) {
                    that.dialStar = 2;
                    that.dialDetail = '重度污染';
                } else if (300 < dialNum && dialNum <= 500) {
                    that.dialStar = 1;
                    that.dialDetail = '严重污染';
                } else {
                    alert('表盘参数错误');
                }
                that.updateDial();
                //加载C区
                that.domainC();
            },
            //状态展示
            domainC() {
                let that = this;
                let valA = that.cityAirNum;
                let valB = that.dialNum;
                if (0 < valA && valA <= 100) {
                    if (0 <= valB && valB <= 50) {
                        that.funGridItems = ['1', '1', '1', '1', '1', '1'];
                    } else if (50 < valB && valB <= 100) {
                        that.funGridItems = ['1', '1', '1', '1', '1', '1'];
                    } else if (100 < valB && valB <= 150) {
                        that.funGridItems = ['2', '1', '1', '1', '2', '1'];
                    } else if (150 < valB && valB <= 200) {
                        that.funGridItems = ['2', '1', '1', '1', '2', '1'];
                    } else if (200 < valB && valB <= 300) {
                        that.funGridItems = ['3', '1', '1', '1', '2', '1'];
                    } else if (300 < valB) {
                        that.funGridItems = ['3', '1', '1', '1', '2', '1'];
                    } else {
                        alert('表盘参数错误');
                    }
                } else if (100 < valA && valA <= 200) {
                    if (0 <= valB && valB <= 50) {
                        that.funGridItems = ['1', '2', '3', '2', '1', '2'];
                    } else if (50 < valB && valB <= 100) {
                        that.funGridItems = ['1', '2', '3', '2', '1', '2'];
                    } else if (100 < valB && valB <= 150) {
                        that.funGridItems = ['2', '2', '2', '2', '2', '2'];
                    } else if (150 < valB && valB <= 200) {
                        that.funGridItems = ['2', '2', '2', '2', '2', '2'];
                    } else if (200 < valB && valB <= 300) {
                        that.funGridItems = ['3', '4', '1', '1', '2', '1'];
                    } else if (300 < valB) {
                        that.funGridItems = ['3', '4', '1', '1', '2', '1'];
                    } else {
                        alert('表盘参数错误');
                    }
                } else if (200 < valA && valA <= 300) {
                    if (0 <= valB && valB <= 50) {
                        that.funGridItems = ['1', '3', '3', '2', '1', '2'];
                    } else if (50 < valB && valB <= 100) {
                        that.funGridItems = ['1', '3', '3', '2', '1', '2'];
                    } else if (100 < valB && valB <= 150) {
                        that.funGridItems = ['2', '3', '3', '2', '2', '2'];
                    } else if (150 < valB && valB <= 200) {
                        that.funGridItems = ['2', '3', '3', '2', '2', '2'];
                    } else if (200 < valB && valB <= 300) {
                        that.funGridItems = ['3', '4', '3', '2', '2', '2'];
                    } else if (300 < valB) {
                        that.funGridItems = ['3', '4', '3', '2', '2', '1'];
                    } else {
                        alert('表盘参数错误');
                    }
                } else if (valA > 300) {
                    if (0 <= valB && valB <= 50) {
                        that.funGridItems = ['1', '3', '3', '2', '1', '2'];
                    } else if (50 < valB && valB <= 100) {
                        that.funGridItems = ['1', '3', '3', '2', '1', '2'];
                    } else if (100 < valB && valB <= 150) {
                        that.funGridItems = ['2', '3', '3', '2', '2', '2'];
                    } else if (150 < valB && valB <= 200) {
                        that.funGridItems = ['2', '3', '3', '2', '2', '2'];
                    } else if (200 < valB && valB <= 300) {
                        that.funGridItems = ['3', '4', '3', '2', '2', '2'];
                    } else if (300 < valB) {
                        that.funGridItems = ['3', '4', '3', '2', '2', '2'];
                    } else {
                        alert('表盘参数错误');
                    }
                } else {
                    if (0 <= valB && valB <= 50) {
                        that.funGridItems = ['1', '3', '3', '2', '1', '2'];
                    } else if (50 < valB && valB <= 100) {
                        that.funGridItems = ['1', '3', '3', '2', '1', '2'];
                    } else if (100 < valB && valB <= 150) {
                        that.funGridItems = ['2', '3', '3', '2', '2', '2'];
                    } else if (150 < valB && valB <= 200) {
                        that.funGridItems = ['2', '3', '3', '2', '2', '2'];
                    } else if (200 < valB && valB <= 300) {
                        that.funGridItems = ['3', '4', '1', '2', '2', '1'];
                    } else if (300 < valB) {
                        that.funGridItems = ['3', '4', '1', '2', '2', '1'];
                    } else {
                        alert('表盘参数错误');
                    }
                }
                //更新所有Fun视图
                that.uploadFunGrid();
            },
            //通过aqi判断城市空气质量
            domainA(aqi) {
                let that = this;
                if (aqi > 0 && aqi <= 50) {
                    that.domainACore('优', aqi, '#72B963');
                } else if (aqi > 50 && aqi <= 100) {
                    that.domainACore('良', aqi, '#E1C556');
                } else if (aqi > 100 && aqi <= 150) {
                    that.domainACore('轻度污染', aqi, '#E6855B');
                } else if (aqi > 150 && aqi <= 200) {
                    that.domainACore('中度污染', aqi, '#BE5056');
                } else if (aqi > 200 && aqi <= 300) {
                    that.domainACore('重度污染', aqi, '#A24975');
                } else if (aqi > 300) {
                    that.domainACore('严重污染', aqi, '#823E47');
                } else {
                    alert('获取城市空气质量出错');
                }
            },
            //城市空气质量
            domainACore(cityAirText, cityAirNum, cityAirColor) {
                let that = this;
                that.cityAirText = cityAirText;
                that.cityAirNum = cityAirNum;
                that.cityAirColor = cityAirColor;
            },
            //通过经纬度判断当前页面展示情况
            handler() {
                let that = this;
                //获取地理位置
                that.$wechat.ready(() => {
                    that.$wechat.getLocation({
                        type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                        success: function (res) {
                            let latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90  lat纬度
                            let longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。 lng经
                            let param = {
                                longitude: longitude,
                                latitude: latitude,
                            };
                            //TODO 当前页面只调用一次（若存在则直接使用）
                            if (that.cityAirNum) {
                                that.domainA(that.cityAirNum);
                                that.loadDevice();
                            } else {
                                that.$http.restPost('/getMojiWeather.do', param).then((res) => {
                                    let data = res.data;
                                    console.log(JSON.stringify(data));
                                    if (data.result === 1) {
                                        //取湿度
                                        if (data.briefCondition && data.briefCondition.data && data.briefCondition.data.condition && data.briefCondition.data.condition.humidity) {
                                            that.humidity = data.briefCondition.data.condition.humidity;
                                        }
                                        //取天气：气温
                                        let briefCondition = data.briefCondition;
                                        if (briefCondition) {
                                            let bcData = briefCondition.data;
                                            if (bcData) {
                                                //天气
                                                if (bcData.condition && bcData.condition.temp && bcData.condition.condition) {
                                                    that.tempNumber = '' + bcData.condition.temp;
                                                    that.tempDetails = '天气:' + bcData.condition.condition;
                                                }
                                                //城市
                                                if (bcData.city && bcData.city.pname && bcData.city.name) {
                                                    that.regionText = bcData.city.pname + '·' + bcData.city.name;
                                                }
                                            }
                                        }
                                        //取空气指数
                                        if (data.aqi && data.aqi.data) {
                                            let aqi = data.aqi.data.aqi.value;
                                            if (aqi) {
                                                that.domainA(aqi);
                                                that.loadDevice();
                                                return;
                                            }
                                        }
                                        //接口错误：为了在接口错误的时候显示表盘
                                        that.loadDevice();
                                        alert('天气接口错误')
                                    } else {
                                        alert('天气获取失败')
                                    }
                                })
                            }
                        }
                    });
                });
            }
        },
    }
</script>
<style lang="css" scoped>

    /*:root {*/
    /*    box-sizing: border-box;*/
    /*}*/

    /**, *:before, *:after {*/
    /*    box-sizing: inherit;*/
    /*}*/

    .main-class {
        width: 100%;
    }

    /* 天气面板 */
    .weather {
        top: 4.3rem;
        left: 2rem;
        position: fixed;
    }

    /* 天气数据来源 */
    .weather-source {
        top: 4.3rem;
        right: 1.2rem;
        font-size: 1.1rem;
        position: fixed;
        color: #fff;
    }

    .weather-source > :last-child {
        color: white;
        font-size: 14px;
        margin-top: 5px;
    }

    .weather-source > :nth-child(2) > span {
        border-left: 0.5rem solid green;
        border-radius: 5px;
        margin-right: 0.7rem;
    }

    /* tab按钮 */
    .tab-btn-group > :nth-child(2) {
        margin: 0 1.2rem 0 1.2rem;
    }

    .tab-btn-group {
        width: 100%;
        text-align: center;
        position: fixed;
        bottom: 1.55rem;
    }

    .fun-btn-group-parent {
        width: 100%;
        text-align: center;
        position: fixed;
        bottom: 4.5rem;
    }

    .fun-btn-group {
        display: inline-grid;
        grid-row-gap: 0;
        grid-column-gap: 3rem;
        grid-template-columns: 4rem 4rem 4rem;
        grid-template-rows: 5rem 5rem;
        justify-items: stretch;
    }

    /* 表盘DIV */
    .dial-canvas-div {
        width: 100%;
        position: fixed;
        text-align: center;
    }

    /* 报表 */
    .charts {
        position: fixed;
        top: 15%;
    }

    .fun-group-text p {
        margin: 0;
        padding: 0;
        width: 100%;
        text-align: center;
        font-weight: Bold;
        font-size: 1.2rem;
    }

    /*  表盘背景图*/
    .dial-background-img {
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: -9999999;
    }

    .down-menu {
        height: 3.3rem;
        width: 100%;
        position: fixed;
        z-index: 9999999;
    }

    .down-menu-btn {
        width: 50%;
        height: 3.1rem;
        display: inline-block;
        position: fixed;
        z-index: 99999999;
        top: 0.10462rem;
        right: 0;
        border: 0;
    }

    .fun-btn-group-1 > *, .fun-btn-group-2 > * {
        margin: 0 1.1rem 0 1.1rem;
    }
</style>
